<style>
.bg {
 background-color: blue;
 height: 1px;
 border: 0;
}

</style>

<template>
  <div>
    <criteria-paged :model="model">
      <criteria partial='criteria' @condition-changed='search'>
        <div partial>
          <form>
            <div class="form-group">
              <label for="f_keyword">小&nbsp;&nbsp;&nbsp;区：&nbsp;</label>
              <input class="form-group" id="f_keyword"
              v-model=model.f_keyword condition="f_residential_area like '%{}%'" />
            </div>
            <div class="form-group">
              <label for="f_user_name">用户名：</label>
              <input class="form-group" id="f_user_name"
              v-model=model.f_user_name condition="f_user_name like '%{}%'" />
            </div>
            <div class="form-group">
              <label for="f_state">安检状态：</label>
              <v-select id="f_state" :value.sync="model.f_state"
              :options='$parent.$parent.check_states' placeholder='请选择安检状态'
              v-model="model.f_state" condition="f_state='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_state">上次安检状态：</label>
              <v-select id="f_state" :value.sync="model.f_last_state"
              :options='$parent.$parent.last_check_states' placeholder='请选择上次安检状态'
              v-model="model.f_last_state" condition="f_last_check_state='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_upload_state">上传状态：</label>
              <v-select id="f_upload_state" :value.sync="model.f_upload_state"
              :options='$parent.$parent.upload_states' placeholder='请选择上传状态'
              v-model="model.f_upload_state" condition="f_upload_state='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_upload_state">用户类型：</label>
              <v-select id="f_upload_state" :value.sync="model.f_user_type"
              :options='$parent.$parent.user_types' placeholder='请选择用户类型'
              v-model="model.f_user_type" condition="f_user_type='{}'" close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_approved">审核状态：</label>
              <v-select id="f_approved" :value.sync="model.f_approved"
              :options='$parent.$parent.verify_state' placeholder='请选择审核状态'
              v-model="model.f_approved" condition="f_approved='{}'" close-on-select clear-button></v-select>
            </div>
            <button type="button" class="btn btn-success" @click="search">查询</button>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div @click="$parent.$parent.$parent.inspect(row)" class="col-md-12 col-lg-12">
            <table class="table table-striped">
              <tbody>
                <tr>
                  <td class="h5">用户名：</td>
                  <td>{{row.f_user_name}}&nbsp;<button type="button" class="btn btn-primary" v-on:click.stop.prevent='$parent.$parent.$parent.reserve($index)'>预约</button>&nbsp;<button type="button" class="btn btn-primary" v-on:click.stop.prevent='$parent.$parent.$parent.cancelReserve($index, row.id)'>取消预约</button></td>
                </tr>
                <tr>
                  <td class="h5">电话：</td>
                  <td>{{row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone}}&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-earphone" v-on:click.stop.prevent='$parent.$parent.$parent.makeAPhoneCall(row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone)'></span></td>
                </tr>
                <tr>
                  <td class="h5">小区：</td>
                  <td>{{row.f_residential_area}}</td>
                </tr>
                <tr>
                  <td class="h5">楼|单元|层|房：</td>
                  <td>{{row.f_building}} | {{row.f_unit}} | {{row.f_floor}} | {{row.f_room}}</td>
                </tr>
                <tr>
                  <td class="h5">地址：</td>
                  <td>{{row.f_address}}</td>
                </tr>
                <tr>
                  <td class="h5">用户类型：</td>
                  <td>{{row.f_user_type}}</td>
                </tr>
                <tr>
                  <td class="h5">月计划：</td>
                  <td>{{row.f_plan_name}}</td>
                </tr>
                <tr>
                  <td class="h5">上次安检状态：</td>
                  <td>{{row.f_last_check_state}}</td>
                </tr>
                <tr>
                  <td class="h5">安检状态：</td>
                  <td>{{row.f_state}}</td>
                </tr>
                <tr>
                  <td class="h5">上传状态：</td>
                  <td>{{row.f_upload_state}}</td>
                </tr>
                <tr>
                  <td class="h5">预约时间：</td>
                  <td>{{row.f_prearranged_date}}</td>
                </tr>
                <tr>
                  <td class="h5">审核状态：</td>
                  <td>{{row.f_approved}}</td>
                </tr>
                <tr>
                  <td class="h5">审核意见：</td>
                  <td>{{row.f_approved_note}}</td>
                </tr>
              </tbody>
            </table>
            <hr class="bg" />
          </div>
        </div>
      </list>
    </criteria-paged>
    <div style="height:100px;"></div>
    <modal :show.sync="showModal">
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          选择预约时间
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <input type="datetime-local" v-model="f_preset_dt">
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-success" @click="genuineReserve">确认</button>
      </div>
    <modal>
  </div>
</template>

<script>
import LocalPagedList from './LocalPagedList'
import Vue from 'vue'
import { PagedList } from 'vue-client'
import * as Util from '../Util'

export default {
  title: '安检计划项',
  data() {
    return {
      model: Vue.android ? new LocalPagedList('计划按小区导航', 5) : new PagedList(Vue.url + 'sql/计划按小区导航', 5),
      showModal: false,
      param: null,
      f_preset_dt : Util.to3339TimeString(),
      check_states: [
        {label: '请选择安检状态', value: null},
        {label: '未检', value: '未检'},
        {label: '已检', value: '已检'},
        {label: '拒检', value: '拒检'},
        {label: '到访不遇', value: '到访不遇'}
      ],
      last_check_states: [
        {label: '请选择安检状态', value: null},
        {label: '入户', value: '入户'},
        {label: '拒检', value: '拒检'},
        {label: '到访不遇', value: '到访不遇'}
      ],
      upload_states: [
        {label: '请选择上传状态', value: null},
        {label: '未传', value: '未传'},
        {label: '已传', value: '已传'}
      ],
      user_types: [
        {label: '请选择用户类型', value: null},
        {label: '居民', value: '居民'},
        {label: '工商', value: '工商'},
        {label: '锅炉', value: '锅炉'},
      ],
      verify_state: [
        {label: '请选择审核状态', value: null},
        {label: '已审核', value: '已审核'},
        {label: '未审核', value: '未审核'},
        {label: '打回', value: '打回'},
        {label: '重检', value: '重检'},
      ],
    }
  },
  methods: {
    refresh() {
      console.log("refresh items state")
      // hard code relationship
      this.$children[0].$children[1].search()
    },
    inspect(row) {
      if(row.f_user_type == '居民') {
        this.$goto('check-paper', {f_plan_id: row.f_plan_id, item: row, role: 'inspect'}, 'self', this.refresh)
      } else {
        this.$goto('check-paper-noncivil', {f_plan_id: row.f_plan_id, item: row, role: 'inspect'}, 'self', this.refresh)
      }
    },
    makeAPhoneCall(phoneNumber) {
      HostApp.makeAPhoneCall(phoneNumber)
    },
    reserve (idx) {
      this.param = idx
      this.showModal = true
    },
    cancelReserve (idx, id) {
      HostApp.prearrange(id, '')
      this.$set('model.rows[' + idx + '].f_prearranged_date', null)
    },
    genuineReserve () {
      this.showModal = false
      if(!this.f_preset_dt) {
        HostApp.alert('请选择一个日期')
        return
      }
      let pdt = this.f_preset_dt.replace('T', ' ')
      HostApp.prearrange(this.model.rows[this.param].id, pdt)
      this.$set('model.rows[' + this.param + '].f_prearranged_date', pdt)
    }
  }
}
</script>
